<template>
  <div>
    <div class="customer-info"  v-for="(item, index) in items" ref="testDiv">
      <!--<div class="tag clearfixed">-->
        <!--<span class="info-title">{{item.product}}</span>-->
        <!--&lt;!&ndash;<span class="more" @click="loadResult(1, index)">More</span>&ndash;&gt;-->
      <!--</div>-->
      <el-row type="flex" justify="space-between" class="info-content" >
        <el-col :span="3">
          <span class="info-title" @click="loadResult(1, index)">{{item.prod_family}}</span>
        </el-col>
        <el-col :span="4" :offset="3" @click.native="action(`butclass:${butValue},keywrod: ${Keyword},title:${item.product},content:Account`)">
          <div class="info-one info-item" @click="loadResult(2, index)">
            <!--<img src="../../static/img/icon-account.png" style=" vertical-align: bottom">-->
            <div style="display: inline-block; position: relative; ">
              <!--<p style="margin: 0px; padding: 0px;">Account</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.bp_count}}</p>
            </div>
            <!--<span>Account({{item.bp_count}})</span>-->
          </div>
        </el-col>
        <el-col :span="4" :offset="3" @click.native="action(`butclass:${butValue},keywrod: ${Keyword},title:${item.product},content:Revenue`)">
          <div class="info-two info-item" @click="loadResult(3, index)">
            <!--<img src="../../static/img/icon-machines.png" style=" vertical-align: bottom">-->
            <div style="display: inline-block; position: relative; ">
              <!--<p style="margin: 0px; padding: 0px;">Machine</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.sell_in_qty}}</p>
            </div>
            <!--<span>Machine({{item.sell_in_qty}})</span>-->
          </div>
        </el-col>
        <el-col :span="4" :offset="3" @click.native="action(`butclass:${butValue},keywrod: ${Keyword},title:${item.product},content:Machine`)">
          <div class="info-three info-item" @click="loadResult(4, index)">
            <!--<img src="../../static/img/icon-warranty.png" style=" vertical-align: bottom">-->
            <div style="display: inline-block; position: relative; ">
              <!--<p style="margin: 0px; padding: 0px;">Machine in Warranty</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.prod_in_warranty_qty}}</p>
            </div>
            <!--<span>Machine in Warranty({{item.prod_in_warranty_qty}})</span>-->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { getUsername, getPageId, getPageName, getUrl, getKeyword, getbutValue, setsearchItem} from "../../../utils/auth";

  export default {
    data() {
      return {
        resultValue: '',
        tagTit: '',
        tagNum: '',
        searValue: '',
        Keyword:getKeyword(),
        butValue:getbutValue()
      }
    },
    methods: {
      loadResult(n, index) {
        let url = ''
        this.tagTit = this.items[index].prod_family
        this.tagNum = this.items[index].prod_in_warranty_qty
//        this.childFlag === 'account' ? this.resultValue = this.items[index].Name : this.resultValue = this.items[index]['Bp Number']
//        this.$router.push({ path: '/searchResult', query: { show: n, search_value: this.resultValue, resultTitle: this.items[index].Name, result_flag: this.childFlag }})
          if (this.items[index].prod_activation_flag === 'Y') {
            // url = '/DeepInsight/ProductInsight/ProductDetails'
            // url = '/BusinessInsight/ProductInsight/ProductDetails'
            url = '/InfoRetrieval/ProductDetails'
          } else if (this.items[index].prod_activation_flag === 'N') {
            url = '/InfoRetrieval/searchResult2'
          }
          this.$router.push({path: url,query: {search_value: this.items[index].prod_family, page: 1, rows: 10, resultTitle: this.tagTit, tagNum: this.tagNum}})
          // /CustomerProfile/searchResult2
      },
      action(key){
        var _this=this;
        _this.key = key;
        console.log(key);
        setsearchItem(_this.key);
        Avatar.push([
            'track',
            [
              'category',
              'loginSuccess',
              'label',
              {
                url: getUrl(),
                userName: getUsername(),
                pageID: getPageId(),
                parentName: getPageName(),
                childName : _this.key
              },
              0
            ]
          ]);
      },
    },
    props: ['items', 'childFlag', 'searchValue'],
    mounted() {
      this.searValue = this.searchValue
      this.searValue = this.searValue.toUpperCase()
      for(let i = 0; i <this.items.length; i++) {
        var aDemo = this.searValue.split('');
        var demoLength = aDemo.length
        if(this.items[i].prod_family.toUpperCase().indexOf(this.searValue) != -1) {
          var qs = this.items[i].prod_family.toUpperCase().indexOf(this.searValue)
          var jq = this.items[i].prod_family.slice(qs, qs+demoLength)
          var aValue = this.items[i].prod_family.split('')
          var aValue1 = aValue.slice(0, qs).join('')
          var aValue2 = aValue.slice(qs+demoLength).join('')
          var aValue3 = aValue.slice(qs, qs+demoLength).join('')
//        console.log(this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML)
          this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #ff5b00">'+aValue3+'</span>'+aValue2
        }
      }
    },
    updated() {
      this.searValue = this.searchValue
      this.searValue = this.searValue.toUpperCase()
      for(let i = 0; i <this.items.length; i++) {
        var aDemo = this.searValue.split('');
        var demoLength = aDemo.length
        if(this.items[i].prod_family.toUpperCase().indexOf(this.searValue) != -1) {
          var qs = this.items[i].prod_family.toUpperCase().indexOf(this.searValue)
          var jq = this.items[i].prod_family.slice(qs, qs+demoLength)
          var aValue = this.items[i].prod_family.split('')
          var aValue1 = aValue.slice(0, qs).join('')
          var aValue2 = aValue.slice(qs+demoLength).join('')
          var aValue3 = aValue.slice(qs, qs+demoLength).join('')
//        console.log(this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML)
          this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #ff5b00">'+aValue3+'</span>'+aValue2
        }
      }
//      this.searValue = this.searchValue
//      this.searValue = this.searValue.toUpperCase()
//      for(let i = 0; i <this.items.length; i++) {
//        var aDemo = this.searValue.split('');
//        var demoLength = aDemo.length
//        if(this.items[i].product.indexOf(this.searValue) != -1) {
//          var qs = this.items[i].product.indexOf(this.searValue)
//          var jq = this.items[i].product.slice(qs, qs+demoLength)
//          var aValue = this.items[i].product.split('')
//          var aValue1 = aValue.slice(0, qs).join('')
//          var aValue2 = aValue.slice(qs+demoLength).join('')
// //        console.log(this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML)
//          this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #f00">'+this.searValue+'</span>'+aValue2
//        }
//      }
    }
  }

</script>

<style lang="scss" scoped>
  .customer-info {
    position: relative;
    margin-top: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #e6ebf5;
    background-color: #fff;
    color: #444c5a;
    font: 15px Helvetica, Regular;
    .info-title {
      position: absolute;
      left: 0;
      cursor: pointer;
      max-width: 310px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      /*padding: 10px;*/
      // ...
      /*max-width: 200px;*/
      /*overflow: hidden;*/
      /*text-overflow: ellipsis;*/
      /*white-space: nowrap;*/
    }
    .more {
      position: absolute;
      right: 1%;
      padding: 10px 50px 10px 10px;
      cursor: pointer;
      color: #409EFF;
      font-weight: bold;
      background: url("../../../../static/img/icon-more.gif") no-repeat 30px center;
    }
    .clearfixed:after {
      content: '';
      display: inline-block;
      clear: both;
    }
    /*background-color: #f00;*/
    .info-content {
      margin-left: 28px;
      .el-col {
        line-height: 75px;
      }
      .info-item {
        /*flex: 1;*/
        position: relative;
        display: inline-block;
        height: 75px;
        margin-left: 7vw;
        /*line-height: 100px;*/
        cursor: pointer;
        /*background-color: #090;*/
        img {
          width: 60px;
          height: 60px;
          margin-top: 20px;
        }
        span {
          display: inline-block;
          position: relative;
          top: -20px;
        }
      }
    }
  }
</style>
